import React, { useRef, useState, FC } from 'react';
import ProTable, { ProColumns, ActionType } from '@/components/ProTable';
import styles from './index.less';
import moment from 'moment';
import { OpenDoorRecordTypeReturnType } from '../../API';
import useHoxModel from '../../useHoxModel';
import Carousel, { Modal, ModalGateway } from 'react-images';
interface Props {}

const LossCard: FC<Props> = ({}) => {
  const actionRef = useRef<ActionType>();
  const { getAllOpenRecord } = useHoxModel((model) => []);
  const [state, setState] = useState({
    photo: '',
    modalIsOpen: false,
  });

  const columns: ProColumns<OpenDoorRecordTypeReturnType>[] = [
    {
      title: '开门方式',
      formItemColConfig: { md: 6, lg: 6, xl: 5, xxl: 5 },
      align: 'center',
      dataIndex: 'openWay',
      valueEnum: {
        0: { text: '全部' },
        '-1': { text: '远程开门' },
        1: { text: '卡片开门' },
        2: { text: '人脸识别' },
        3: { text: '指纹开门' },
        4: { text: '钥匙开门' },
        5: { text: '密码开门' },
      },
    },
    {
      title: '门名称',
      dataIndex: 'deviceName',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '开门时间',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'time',
      valueType: 'dateTime',
    },
    {
      title: '用户名',
      hideInSearch: true,
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '卡号',
      dataIndex: 'cardNo',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '关键字',
      hideInTable: true,
      formItemColConfig: { md: 6, lg: 6, xl: 5, xxl: 5 },
      dataIndex: 'keyword',
      align: 'center',
    },
    {
      title: '时间区间',
      formItemColConfig: { md: 8, lg: 8, xl: 8, xxl: 8 },
      dataIndex: 'time',
      hideInTable: true,
      align: 'center',
      valueType: 'dateRange',
    },
    {
      title: '用户照片',
      dataIndex: 'photo',
      hideInSearch: true,
      align: 'center',
      render: (text: any) => {
        return (
          <div className={styles['user-photo']}>
            {(text !== '-' && (
              <img
                src={text}
                onClick={() => {
                  setState(() => ({ photo: text, modalIsOpen: true }));
                }}
              />
            )) || <span className={styles['no-data']}>{text}</span>}
          </div>
        );
      },
    },
  ];
  const toggleModal = () => {
    setState((state) => ({ ...state, modalIsOpen: !state.modalIsOpen }));
  };

  return (
    <>
      <ProTable<OpenDoorRecordTypeReturnType>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          const time = params?.time || [];
          const startTime = time[0] && moment(time[0]).valueOf();
          const endTime = time[1] && moment(time[1]).valueOf();

          const data = await getAllOpenRecord({
            keyword: params.keyword || undefined,
            number: params.pageSize,
            page: params.current,
            openWay: params.openWay !== '0' ? params.openWay : undefined,
            startTime: startTime || moment().startOf('day').subtract(7, 'day').valueOf(),
            endTime: endTime || moment().endOf('day').valueOf(),
          });
          return await {
            data: data?.list || [],
            success: true,
            total: data?.count || 0,
          };
        }}
        rowKey="id"
        formColConfig={{ md: 4, lg: 4, xl: 6, xxl: 6 }}
        className={styles['table-wrap']}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        options={{
          search: {
            name: 'keyword',
          },
        }}
        toolBarRender={false}
      />
      <ModalGateway>
        {state.modalIsOpen ? (
          <Modal onClose={toggleModal}>
            <Carousel views={[{ source: state.photo }]} />
          </Modal>
        ) : null}
      </ModalGateway>
    </>
  );
};
export default LossCard;
